<template>
    <!-- contenteditable可以使div支持键盘事件，默认情况下div不支持键盘事件,这个方法不太行，div上会有输入框 -->
    <!-- 通过添加tabindex使得div可点击-->
    <div tabindex="-1"  @keydown.space="doClickSpace()" @mouseover="showVideoControl" @mousemove="doVideoControlTrigger" @mouseleave="hideVideoControl" v-bind:class="{'hidden-mouse':isMouseHidden,'video-with-danmu-small':videoWithDanmuisSmall,'video-with-danmu-full':videoWithDanmuisFull}">
        <div class="cham-danmu" v-show="isDanmuOpen==='1'">
            <Danmu ref="danmu" :sliderValue="sliderValue"></Danmu>
        </div>
        <!--v-if="showVideoControlDiv" -->
        <div class="cham-player-video-control-0" @click="changePlayStatus" v-bind:class="{'hidden-mouse':isMouseHidden}">
            <!--这个模块主要用于占位和触发click事件 -->
            <div v-if="showVideoControlDiv&&videoWithDanmuisFull" class="cham-player-video-title">
                <div style="float:left;margin-left:10px;line-height:60px;padding-left:10px;line-height:60px;font-size:18px;">
                  某科学的超电磁炮T06
                </div>
            </div>
        </div>

        <div v-if="showVideoControlDiv" class="cham-player-video-control">
            <div style="width:calc(100% - 20px);height:25px;margin-left:10px;">
<!--                <input type="range" style="width:100%"/>-->
                <vue-slider @change="sliderChange" v-model="sliderValue" :max="maxSliderValue" :tooltip-formatter="toolTipFormatter"/>
            </div>
            <!--播放和暂停按钮-->
            <div class="video-control-button" @click="changePlayStatus" style="float:left;margin-left:10px;">
                <icon v-if="!this.isVideoPlay" name="cham-bofang" scale="3"></icon>
                <icon v-if="this.isVideoPlay" name="cham-zanting" scale="3"></icon>
            </div>

            <!--视频时长显示区域-->
            <div class="video-control-show-time" style="float:left;">
               <span class="ziti-miaobian">{{currentTimeStr}} / {{totalTimeStr}}</span>
            </div>

            <!--音量模块-->
            <div class="video-control-voice" style="float:left;margin-left:10px;" @mouseenter="doShowVoiceToolTip" @mouseleave="doShowVoiceToolTip">
                <div v-if="this.showVoiceToolTip" style="width:130px;height:40px;position:absolute;z-index:20;top:-5px;left:40px;">
                    <el-slider v-model="chamVoice" style="width:80px;margin-left:10px;" ></el-slider>
                </div>

                <div style="width:40px;height:40px;margin-top:-5px;" @click="changeVoice0or20">
                    <icon v-if="chamVoice==0" name="cham-no-voice" scale="3" style="margin-top:5px;"></icon>
                    <icon v-if="chamVoice>=1 && chamVoice<=50" name="cham-voice-small" scale="3" style="margin-top:5px;"></icon>
                    <icon v-if="chamVoice>50" name="cham-voice-big" scale="3" style="margin-top:5px;"></icon>
                </div>
            </div>





            <!--全屏状态-->
            <div class="video-control-button" @click="changeScreenStatus" style="float:right;margin-right:10px;">
                <icon v-if="!isScreenFull" name="cham-fangda" scale="3"></icon>
                <icon v-if="isScreenFull" name="cham-suoxiao" scale="3"></icon>
            </div>

            <!--显示和隐藏弹幕-->
            <div class="video-control-button" style="float:right;margin-right:10px;">
                <el-tooltip :content="'弹幕状态: ' + danmuShowValue" placement="top" style="margin-top:-15px;">
                    <el-switch
                        v-model="isDanmuOpen"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="1"
                        inactive-value="0">
                    </el-switch>
                </el-tooltip>
            </div>

            <!--弹幕输入模块-->
            <div class="video-control-danmu" style="float:right;" v-if="videoWithDanmuisFull">
                <el-input @keyup.enter.native="danmuShoot" @focus="danmuInputFocus=true" @blur="danmuInputFocus=false" placeholder="请输入你想要发送的弹幕内容" v-model="danmuContent" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search" @click="danmuShoot"></el-button>
                </el-input>
            </div>



        </div>
        <div class="cham-video" v-bind:class="{'hidden-mouse':isMouseHidden}">
            <video id="chamVideo" ref="chamVideo" style="width:100%; height:100%; object-fit:fill">
                <source src="#" type="video/mp4">
            </video>
        </div>
    </div>
</template>

<script>
    import screenfull from 'screenfull'
    import VueSlider from 'vue-slider-component'
    import 'vue-slider-component/theme/antd.css'
    import chamUtils from '@/utils/chamUtils';
    import Danmu from '@/components/video/danmu'
    export default {
        name: "videoWithDanmu",
        components: {
            VueSlider,Danmu
        },
        data(){
            return{
                sliderValue:0,//当前视频播放点
                maxSliderValue:100,
                chamVoice:50,
                isVideoPlay:false,//视频是否是播放状态
                isScreenFull:false,//屏幕是否为全屏
                isDanmuOpen:'1',//弹幕是否打开
                danmuShowValue:'开启',
                videoWithDanmuisSmall:true,
                videoWithDanmuisFull:false,
                showVideoControlDiv:false,
                showVoiceToolTip:false,
                isMouseHidden:false,
                currentTimeStr:'00:00:00',
                totalTimeStr:'00:00:00',
                danmuContent:'',
                danmuInputFocus:false,//弹幕输入框获取焦点
                videoRandomPoint:[],
                durationTime:1
            }
        },
        watch:{
            'sliderValue'(newValue){
                this.$emit('sliderValueChange',newValue);
                this.$refs.danmu.sliderValueChange(newValue);
            },
            // 'danmuInputFocus'(newValue){
            //     var self = this;
            //     if(newValue){
            //         if(self.$timeslotTrigger!=null){
            //             debugger;
            //             clearTimeout(self.$timeslotTrigger);
            //         }
            //     }
            //
            // },
            'isDanmuOpen'(newValue){
                var self = this;
                if(newValue==='1'){
                    self.danmuShowValue = '开启';
                    //当弹幕开启且视频播放状态为播放的时候，开始弹幕滚动
                    if(self.isVideoPlay){
                        this.$refs.danmu.doDanmuStop(false);
                    }
                }

                if(newValue==='0'){
                    this.danmuShowValue = '关闭';
                    // this.$refs.danmu.doDanmuStop(false);
                }
            },
            'chamVoice'(newValue){
                var self = this;
                var chamVideo = self.$refs.chamVideo;
                chamVideo.volume = newValue/100;
            }
        },
        methods:{
            danmuShoot(){
                //发射弹幕方法
                var localStorage = window.localStorage;
                // var videoId = localStorage.getItem("videoId");
                var videoInfo =  JSON.parse(localStorage.getItem("videoInfo"));
                var videoId = videoInfo.videoId;

                var sliderValue = this.sliderValue;
                //不允许0时弹幕的存在，强制修改为1
                if(sliderValue===0){
                    sliderValue = 1;
                }
                var danmuContent = this.danmuContent;
                var self = this;
                var danmuShootDTO = new Object();
                danmuShootDTO.videoId = videoId;
                danmuShootDTO.sliderValue = sliderValue;
                danmuShootDTO.danmuContent = danmuContent;
                // danmuShootDTO.danmuColor = self._createRandom1to3();
                var random1to3 = self._createRandom1to3();
                if(random1to3===1){
                    danmuShootDTO.danmuColor = 'white';
                }

                if(random1to3===2){
                    danmuShootDTO.danmuColor = 'pink';
                }

                if(random1to3===2){
                    danmuShootDTO.danmuColor = 'yellow';
                }
                var random0to100 = Math.floor(Math.random()*98)+1;
                danmuShootDTO.top = random0to100;

                var random1to999 = Math.floor(Math.random()*998)+1;
                danmuShootDTO.danmuDelay = random1to999;

                // 'pdm-service/pdm/updateUserInfo'
                self.$api.post('/danmu-service/danmuController/danmuShoot',danmuShootDTO, result => {
                    //清空弹幕信息
                    self.danmuContent = "";
                    //self.res = result;
                });

            },
            _createRandom1to3(){
               //随机生成0到100的随机数
                var random0to100 = Math.floor(Math.random()*100);
                //如果随机数大于90，返回3
                if(random0to100>90)
                    return 3;
                //如果随机数大于80，返回2
                if(random0to100>80)
                    return 2;
                //否则返回1
                return 1;
            },
            doClickSpace(){
                this.changePlayStatus();
                var e = window.event;
                //移除空格的默认向下移动滚动条事件
                if(e.preventDefault){
                    e.preventDefault();
                }
            },
            sliderChange(){
                //debugger;
                //改变视频播放时间
                var self = this;
                var chamVideo = self.$refs.chamVideo;
                chamVideo.currentTime = self.sliderValue;
                //清理弹幕仓
                self.$refs.danmu.doCleanDanmu();
            },
            toolTipFormatter(value){
                return chamUtils.getTimeStrFormNum(value);
            },
            // formatTooltip(val) {
            //     return val / 100;
            // },
            doShowVoiceToolTip(){
                var self = this;
                if(self.showVoiceToolTip){
                    self.showVoiceToolTip = false;
                    return;
                }

                if(!self.showVoiceToolTip){
                    self.showVoiceToolTip = true;
                    return;
                }
            },
            changeScreenStatus(){
                //改变屏幕状态，在全屏和缩小状态切换
                var self = this;
                //如果屏幕是全屏
                if(self.isScreenFull){
                    //将屏幕切换为非全屏状态
                    self.isScreenFull = false;
                    // self.$emit('doChangeScreenStatus',false);
                    self.doChangeScreenStatus();
                    return;
                }

                //如果屏幕不是全屏
                if(!self.isScreenFull){
                    //将屏幕切为全屏状态
                   self.isScreenFull = true;
                    // self.$emit('doChangeScreenStatus',true);
                    self.doChangeScreenStatus();
                   return;
                }

            },
            changeVoice0or20(){
                //将音量从静音改成20，或者从20改成静音
                var self = this;
                var chamVideo = self.$refs.chamVideo;
                //如果声音为0，改成0.2
                if(self.chamVoice == 0){
                    self.chamVoice = 20;
                    chamVideo.volume = self.chamVoice/100;
                    return;
                }

                //如果声音不为0，将声音改为0
                if(self.chamVoice != 0){
                    self.chamVoice = 0;
                    chamVideo.volume = self.chamVoice;
                    return;
                }
            },
            //改变播放状态
            changePlayStatus(){
                var self = this;
                // self.$video.play();
                //播放状态切成暂停状态
                if(self.isVideoPlay){
                    //self.$refs.videoPlayer.player.pause();
                    self.$refs.chamVideo.pause();
                   // self.$video.pause();
                    self.isVideoPlay = false;
                    self.$refs.danmu.doDanmuStop(true);
                    return;
                }

                //暂停状态切为播放状态
                if(!self.isVideoPlay){
                    //self.$refs.videoPlayer.player.play();
                    self.$refs.chamVideo.play();
                    //self.$video.play();
                    self.isVideoPlay = true;
                    self.$refs.danmu.doDanmuStop(false);
                    return;
                }
            },
            doVideoControlTrigger(){
                var self = this;
                self.showVideoControlDiv = true;
                self.isMouseHidden = false;
                if(self.$timeslotTrigger!=null){
                    clearTimeout(self.$timeslotTrigger);
                }
                var trigger = null;
                //绑定一个定时器到vue对象中
                //如果弹幕输入框没有获取焦点
                if(!self.danmuInputFocus){
                    //debugger;
                    trigger = setTimeout(function(){
                        // $('#App').attr('style', 'cursor:none');
                        self.showVideoControlDiv = false;
                        self.isMouseHidden = true;
                    },2000); //这里2000就是间隔2秒
                }


                self.$timeslotTrigger = trigger;

            },
            showVideoControl(){
                this.showVideoControlDiv = true;
            },
            hideVideoControl(){
                this.showVideoControlDiv = false;
                //debugger;
            },
            //将窗口从全屏和非全屏之间切换
            doChangeScreenStatus(){
                if (screenfull.isEnabled) {
                    screenfull.toggle();
                }
            },
        },
        mounted() {
            var self = this;
            window.onresize = () => {
                if(screenfull.isFullscreen){
                    self.videoWithDanmuisSmall = false;
                    self.videoWithDanmuisFull = true;
                    //全屏状态
                    self.$emit('doChangeScreenStatus',true);
                }

                if(!screenfull.isFullscreen){
                    self.videoWithDanmuisSmall = true;
                    self.videoWithDanmuisFull = false;
                    //非全屏状态
                    self.$emit('doChangeScreenStatus',false);
                }
            };

            //获取video对象，挂载监听器
            var video = self.$refs.chamVideo;
            //视频加载完毕的钩子
            video.addEventListener("canplaythrough",function(){
                //debugger;
                var currentTime=Math.ceil(this.currentTime);//视频当前播放时长
                var currentTimeStr = chamUtils.getTimeStrFormNum(currentTime);
                self.currentTimeStr = currentTimeStr;
                var durationTime = Math.ceil(this.duration);
                self.durationTime = durationTime;
                var totalTimeStr = chamUtils.getTimeStrFormNum(durationTime);
                self.totalTimeStr = totalTimeStr;
                self.maxSliderValue = durationTime;
            })

            //播放时间改变的钩子
            video.addEventListener("timeupdate",function(){
                var currentTime=Math.ceil(this.currentTime);//视频当前播放时长
                //播放时长为1的时候增加播放量???
                // debugger;
                var currentTimeStr = chamUtils.getTimeStrFormNum(currentTime);
                self.currentTimeStr = currentTimeStr;
                self.sliderValue = currentTime;
            });

            //動態修改video的src屬性來播放視頻。
            var localStorage = window.localStorage;
            var videoInfo = JSON.parse(localStorage.getItem("videoInfo"));
            // debugger;
            //

            var videoPath = videoInfo.videoPath;
            video.src = videoPath;


            // var formData = new FormData();
            // formData.append("videoId",videoInfo.videoId);
            // self.$api.post('video-service/videoController/addBofangCount',formData,result=>{
            // });
            // //创建一个随机数数组。
            // chamUtils.createRandom10Array(self.durationTime);
            // debugger;

            //监听鼠标空格事件

        }
    }
</script>

<style scoped>
    .video-with-danmu-small{
        position:relative;
        width:640px;
        height:450px;
        overflow:hidden;
    }
    .video-with-danmu-full{
        position:relative;
        width:100%;
        height:100%;
        overflow:hidden;
    }
    .cham-danmu{
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
        /*opacity: 0.2;*/
        z-index:12;
        pointer-events: none;
    }

    .cham-video{
        /*position:relative;*/
        width:100%;
        height:100%;
        /*background-color:red;*/
        z-index:11;
        cursor:pointer;
        /*pointer-events: none;*/
        float:left;
    }

    .cham-player-video-control-0{
        position:absolute;
        width:100%;
        height:calc(100% - 80px);
        /*height:100%;*/
        top:0;
        left:0;
        /*opacity: 0.2;*/
        z-index:13;
        cursor:pointer;
        /*background-color:red;*/
        /*pointer-events: none;*/
    }

    .cham-player-video-title{
        position:absolute;
        width:100%;
        height:60px;
        /*height:100%;*/
        top:0;
        left:0;
        /*opacity: 0.2;*/
        z-index:13;
        cursor:pointer;
        /*background-color:red;*/
        /*pointer-events: none;*/
    }

    .cham-player-video-control{
        position:absolute;
        width:100%;
        height:80px;
        /*height:100%;*/
        top:calc(100% - 80px);
        left:0;
        /*opacity: 0.2;*/
        z-index:13;
        cursor:pointer;
        /*background-color:red;*/
        /*pointer-events: none;*/
    }

    .video-control-button{
        width:40px;
        height:40px;
        line-height:40px;
        text-align:center;
        color:#ffffff;
    }

    .video-control-show-time{
        width:130px;
        height:40px;
        line-height:40px;
        /*text-align:center;*/
        color:#ffffff;
        margin-top:-5px;
        margin-left:10px;
    }

    .video-control-danmu{
        width:calc(100% - 500px);
        height:40px;
        /*background-color:red;*/
        line-height:40px;
        /*text-align:center;*/
        color:#ffffff;
        margin-top:-5px;
        margin-right:30px;
        /*margin-left:10px;*/
    }

    .video-control-voice{
        /*background-color:red;*/
        position:relative;
        width:40px;
        height:40px;
        line-height:40px;
        text-align:center;
        color:#ffffff;
        /*margin-top:-70px;*/
    }

    .hidden-mouse{
        cursor:none !important;
    }

    .ziti-miaobian{
        text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
        -webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
        -moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
    }




</style>
